<template>
  <div>
    <div style="display: flex;justify-content: center;align-items: center" v-if="mode === 0">
      <DatePicker style="width: 200px;" :type="type"
                  @on-change="onChangeBegin"
                  :value="startTime"
                  :options="beginOptions"
                  show-week-numbers
                  :format="format"
                  placement="bottom-start" :editable="false"
                  clearable
                  placeholder="开始时间"/>
      <div style="padding: 0 5px">
        <slot></slot>
      </div>
      <DatePicker style="width: 200px" :type="type"
                  :value="endTime"
                  :options="endOptions"
                  @on-change="onChangeEnd"
                  :format="format"
                  show-week-numbers
                  placement="bottom-start" :editable="false"
                  clearable
                  placeholder="结束时间"/>
    </div>
    <div style="display: flex;justify-content: center;align-items: center" v-else-if="mode === 1">
      <DatePicker type="datetimerange"  :value="[startTime,endTime]" :format="format" @on-change="onChange" placeholder="请选择查询时间区间" :style="`width: ${dateWidth}px`" />
    </div>
  </div>
</template>

<script>
import { number } from 'echarts';

/**
 * cascadeDate日期联动
 * @startTime 开始时间
 * @endTime 结束时间
 * @format 格式转换
 * @mode 时间格式 0: 不联动(两个输入框) 1: 联动(一个输入框)
 * @needInit 是否需要初始化数值
 * @onlyMonth 数据区间限制为单月
 * @showShortcuts 是否显示快捷方式
 */
export default {
  name: 'cascadeDate',
  props: {
    mode: {
      type: Number,
      default: 1
    },
    type: {
      type: String,
      default: 'date',
    },
    startTime: {
      type: [String, Date],
      default: ''
    },
    endTime: {
      type: [String, Date],
      default: ''
    },
    initPosition: {
      type: String,
      default: 'now' // now forever
    },
    // 新增格式转换
    format: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    showShortcuts: {
      type: Boolean,
      default: true,
    },
    needInit: {
      type: Boolean,
      default: true
    },
    onlyMonth: {
      type: Boolean,
      default: false
    },
    dateWidth: {
      type: [Number,String],
      default: 300,
    }
  },
  computed: {
    beginOptions () {
      let endTime = this.endTime
      let onlyMonth = this.onlyMonth;
      let initPosition = this.initPosition === 'now' ? Date.now() : false;
      let shortcuts = this.showShortcuts ? [
        {
          text: '今天',
          value () {
            return new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
          }
        },
        {
          text: '昨天',
          value () {
            const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
          }
        },
        {
          text: '一周前',
          value () {
            const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
          }
        },
        {
          text: '一月前',
          value () {
            const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
            return date
          }
        },
        {
          text: '三月前',
          value () {
            const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 90)
            return date
          }
        }
      ] : []
      return {
        disabledDate (date) {
          if (endTime && onlyMonth) {
            let startTime = new Date(`${new Date(endTime).Format('yyyy-MM')}-01 00:00:00`).getTime();
            return date && !(date.valueOf() < (new Date(endTime).getTime()) && date.valueOf() >= startTime)
          } else return date && endTime ? date.getTime() > (new Date(endTime).getTime()) : date.getTime() > initPosition
        },
        shortcuts: shortcuts
      }
    },
    endOptions () {
      let type = this.type;
      let startTime = this.startTime
      let onlyMonth = this.onlyMonth;
      let shortcuts = this.showShortcuts ? [
        {
          text: '今天',
          value () {
            const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
            date.setTime(date.getTime())
            return date
          }
        },
        {
          text: '明天',
          value () {
            const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 1)
            return date
          }
        },
        {
          text: '一周后',
          value () {
            const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
            return date
          }
        },
        {
          text: '一月后',
          value () {
            const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
            return date
          }
        },
        {
          text: '三月后',
          value () {
            const date = new Date(`${new Date().Format('yyyy-MM-dd')} 00:00:00`)
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 90)
            return date
          }
        }
      ] : []
      return {
        disabledDate (date) {
          if (onlyMonth) {
            if (startTime) {
              let year = `${new Date(startTime).getFullYear()}`
              let month = `${new Date(startTime).getMonth() + 1}`
              let maxDay = new Date(year,month,0).getDate();
              let endTime = new Date(`${new Date(startTime).Format('yyyy-MM')}-${maxDay} 23:59:59`).getTime();
              if (type === 'datetime') {
                return date && date.valueOf() < new Date(startTime).getTime() - 86400000;
              } else return date && !(date.valueOf() >= (new Date(startTime).getTime()) && date.valueOf() < endTime)
            } else return date && date.valueOf() < 0
          } else if (type === 'datetime') {
            return date && date.valueOf() <= new Date(startTime).getTime() - 86400000;
          } return date && date.valueOf() < (startTime ? (new Date(startTime).getTime()) : 0)
        },
        shortcuts: shortcuts
      }
    }
  },
  mounted () {
    if (this.needInit) {
      if (!this.startTime) this.$emit('update:startTime', new Date(`${new Date().Format('yyyy')}-1-1 00:00:00`).Format('yyyy-MM-dd hh:mm:ss'))
      if (!this.endTime) this.$emit('update:endTime', new Date(`${new Date().Format('yyyy-MM-dd')} 23:59:59`).Format('yyyy-MM-dd hh:mm:ss'))
    }
  },
  methods: {
    onChangeBegin (date) {
      let startTime = new Date(date).getTime()
      let endTime = this.endTime ? new Date(this.endTime).getTime() : 0
      if (endTime < startTime) this.$emit('update:endTime', '')
      this.$emit('update:startTime', date)
    },
    onChangeEnd (date) {
      if (!date) return this.$emit('update:endTime', date)
      // if(this.type === 'datetime' && this.format === 'yyyy-MM-dd') return this.$emit('update:endTime', date)
      if (this.type === 'datetime') {
        return this.$emit('update:endTime', date)
      } else {
        date = new Date(date)
        date = date.setTime(date.getTime() + (3600 * 1000 * 24 - 100))
      }

      // this.$emit('update:endTime', new Date().Format('yyyy-MM-dd hh:mm:ss'))
      this.$nextTick(() => this.$emit('update:endTime', new Date(date).Format('yyyy-MM-dd hh:mm:ss')))

      if (this.onlyMonth) {
        console.log(this.startTime);
        new Date()
        if (this.startTime) {
          let beginMonth = new Date(this.startTime).getMonth();
          let endMonth = new Date(date).getMonth();

          if (beginMonth !== endMonth) this.$emit('update:startTime', '')
        }
      }
    },
    onChange(e){
      console.log(e);
      // if (e[0]) e[0] = `${e[0].split(' ')[0]} 00:00:00`
      // if (e[1]) e[1] = `${e[1].split(' ')[0]} 23:59:59`
      this.$emit('update:startTime', e[0])
      this.$emit('update:endTime', e[1])
    }
  }
}
</script>

<style scoped>

</style>
